
<title>基本资料</title>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">基本信息</li>
                <li>修改密码</li>
                <!--<li>头像管理</li>-->
            </ul>
            <div id="profile-app" class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" v-cloak>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">账号</label>
                                <div class="layui-input-inline">
                                    <input id="UserName" name="UserName" disabled="disabled" type="text" class="layui-input" v-model="Model.UserName" />
                                </div>
                            </div>
                        </div>
                        <div v-if="Model.UserName!='admin'" class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">角色</label>

                                <div class="layui-input-inline">
                                    <input id="RoleName" name="RoleName" disabled="disabled" type="text" class="layui-input" v-model="Role.Name" />
                                </div>
                            </div>
                        </div>
                        <!--<div v-if="Model.RoleId=='9da680ca2e534b82ae9510216206b69e'" class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">商户</label>

                                <div class="layui-input-inline">
                                    <input id="CustomerName" name="CustomerName" disabled="disabled" type="text" class="layui-input" v-model="Customer.Name" />
                                </div>
                            </div>
                        </div>-->
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>

                                <div class="layui-input-inline">
                                    <input id="RealName" name="RealName" type="text" lay-verify="required" class="layui-input" placeholder="请输入姓名" v-model="Model.RealName" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-inline">
                                    <select id="Gender" name="Gender" lay-filter="Gender" lay-verify="required" v-model="Model.Gender">
                                        <option value="">请选择</option>
                                        <option value="1">男</option>
                                        <option value="2">女</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">手机</label>

                                <div class="layui-input-inline">
                                    <input type="tel" name="MobilePhone" lay-verify="phone" autocomplete="off" placeholder="请输入手机号" v-model="Model.MobilePhone" class="layui-input" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">生日</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="Birthday" id="Birthday" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" :value="Model.Birthday|yyyy_mm_dd" />
                                </div>
                            </div>

                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">微信</label>

                                <div class="layui-input-inline">
                                    <input id="WeChat" name="WeChat" type="text" class="layui-input" v-model="Model.WeChat" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="Email" lay-verify="email" autocomplete="off" class="layui-input" v-model="Model.Email" />
                                </div>
                            </div>

                        </div>

                        <div class="layui-form-item">

                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea id="Description" name="Description" class="layui-textarea" style="width: 514px;resize:none;" v-model="Model.Description"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="save"><i class="fa fa-save" style="margin-right:5px;"></i>确认修改</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-tab-item">
                    <form>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">账号</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" disabled="disabled" v-model="Model.UserName" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">旧密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" lay-verify="pass" class="layui-input" v-model="PasswordModel.OldPassword" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" lay-verify="pass" class="layui-input" v-model="PasswordModel.NewPassword" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">确认新密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" lay-verify="pass" class="layui-input" v-model="PasswordModel.NewPasswordConfirm" />
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="revisePwd"><i class="fa fa-save" style="margin-right:5px;"></i>确认修改</button>
                            </div>
                        </div>
                    </form>
                </div>
                <!--<div class="layui-tab-item">
                    <div class="layui-upload-drag" id="udpHeaderImage">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                    </div>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        已上传图片：
                        <div class="layui-upload-list">
                            <img id="ImgView"   class="layui-upload-img">
                        </div>
                    </blockquote>
                </div>-->
                
            </div>
        </div>
    </div>
</div>
<script> 
    
    layui.use(['admin', 'laypage',  'form', 'laydate', 'ling','upload'], function () {
        var $ = layui.$;
        var table = layui.table;
        var laypage = layui.laypage;
        var form = layui.form;
        var ling = layui.ling;
        var laydate = layui.laydate;
        var upload = layui.upload;
       
        var app = new Vue({
            el: "#profile-app",
            data: {
                Model: {},
                Role: {},
                Customer: {},
                PasswordModel: {},
            },
            methods: {
                Init: function () {
                    ling.get("/Account/GetProfileInfo", null, function (result) {
                        if (result.code == 0) { 
                            app.Model = result.data.User;
                            app.Role = result.data.Role;
                            app.Customer = result.data.Customer;
                            $('#ImgView').attr('src', result.data.url);
                            $('#ImgView').attr('alt', result.data.name); 

                        }
                        else {
                            core.alert(result.msg);
                        }
                    });
                }
            },
            updated: function () {
                form.render();
            },
            filters: {
                yyyy_mm_dd: function (value) {
                    if (value && value.length > 10)
                        return value.substr(0, 10);
                    else return value;
                },
            }
        });

        app.Init();

        //拖拽上传
        upload.render({
            elem: '#udpHeaderImage'
          , url: '/Account/UploadHeader/'
          , done: function (result) {
              if (result.code == 0) {
                  ling.msg(result.msg || '上传成功', null, 6, 1000);
                  $('#ImgView').attr('src', result.data.url);
                  $('#ImgView').attr('alt', result.data.name); 
              }
              else {
                  ling.alert(result.msg);
              }
              
          }
        });


        //构造和监听日期选择
        laydate.render({
            elem: '#Birthday'
            , done: function (value, date) {//value, date, endDate点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
              
                if(app.Model)
                    app.Model[this.elem[0].name] = value;
            }
        });

        //监听 下拉选择
        form.on('select', function (data) {
            if (app.Model)
                app.Model[data.elem.name] = data.value;
        });

        ////监听提交
        form.on('submit(save)', function (data) {
            if (app.Model) {
                var model = app.Model;
                ling.post("/Account/ModifyInfo", model, function (result) {
                    if (result.code == 0) {
                        ling.msg(result.msg || '更新成功', null, 6, 1000);
                    }
                    else {
                        ling.alert(result.msg);
                    }
                });
            }
            return false;
        });

        //自定义验证规则
        form.verify({
            verifyName: function (value) {
                if (value.length < 2) {
                    return '至少得2个字符啊';
                }
            }
            , pass: [/^(?=.*\d)(?=.*[a-z]).{8,}$/, '密码至少8位,数字和字母的组合']
        });
        ////监听提交
        form.on('submit(revisePwd)', function (data) {
            if (app.PasswordModel) {
                var bindMode = app.PasswordModel;
                if (!bindMode.NewPassword || bindMode.NewPassword != bindMode.NewPasswordConfirm) {
                    return layer.msg('两次密码输入不一致');
                }
                var model = { oldPassword: bindMode.OldPassword, newPassword: bindMode.NewPassword };
                ling.post("/Account/ChangePassword", model, function (result) {
                    if (result.code == 0) {
                        ling.msg(result.msg || '更新成功', null, 6, 1000);
                    }
                    else {
                        ling.alert(result.msg);
                    }
                });
            }
            return false;
            });

});
</script>